import {useEffect, useState} from "react";
import {Button, message, Modal, Table} from "antd";
import {ColumnsType} from "antd/lib/table";
import copy from "copy-to-clipboard";
import './index.scss'
import _ from "lodash";
import {apiDelDataExportItem, apiGetDataExport} from "@/common/apis/journal";
import {IPageResponse, IParam, PageInfo} from "@/common/common";

const DataExport = () => {

  const [params, setParams] = useState<IParam>({page: 1, size: 10});
  const [pageResponse, setPageResponse] = useState<IPageResponse<any>>({pageInfo: {page: 1, size: 10, total: 0}})

  useEffect(() => {
    getDataExport();
  }, [params]);

  const getDataExport = async () => {
    const res = await apiGetDataExport(params || {});
    if (res.code === 0) {
      setPageResponse(res)
    }
  }

  const deleteItem = async (id: string, index: number) => {
    const copyData = _.cloneDeep(pageResponse);
    copyData.data?.splice(index, 1);
    if (copyData.pageInfo.total) {
      copyData.pageInfo.total = copyData.pageInfo.total - 1
    }
    setPageResponse(copyData);
    // const res = await apiDelDataExportItem([id]);
    // if (res.code === 0) {
    //   message.success("删除成功");
    //   const copyData = _.cloneDeep(pageResponse);
    //   copyData.data.splice(index, 1);
    //   setPageResponse(copyData);
    // }
  }

  const onChangePage = (page: PageInfo) => {
    setParams({...params, ...page})
  }

  const columns: ColumnsType<any> = [
    {
      title: "创建时间",
      key: "createAt",
      dataIndex: "createAt",
      align: "center",
    },
    {
      title: "条件",
      dataIndex: "exportParam",
      key: "exportParam",
      render: (text: string, record: any) => {
        return (
          <Button
            type="link"
            onClick={() => {
              Modal.info({
                title: "导出条件",
                content: <div>{record.exportParam}</div>,
              });
            }}
          >
            查看
          </Button>
        );
      },
      align: "center",
    },
    {
      title: "导出类型",
      dataIndex: "type",
      key: "type",
      align: "center",
    },
    {
      title: "耗时",
      dataIndex: "consumed",
      key: "consumed",
      align: "center",
    },
    {
      title: "估算大小",
      dataIndex: "size",
      key: "size",
      align: "center",
    },
    {
      title: "操作人员",
      dataIndex: "createBy",
      key: "createBy",
      align: "center",
    },
    {
      title: "状态",
      dataIndex: "status",
      key: "status",
      align: "center",
      render: (text: number) => {
        let classname;
        let content;
        switch (text) {
          case -1:
            classname = 'error';
            content = "失败";
            break;
          case 0:
            classname = 'info';
            content = "导出中";
            break;
          case 1:
            classname = 'success';
            content = "成功";
            break;
          case 2:
            classname = 'error';
            content = "过期";
            break;
        }
        return (
          <div className={`exportType ${classname}`}>{content}</div>
        );
      },
    },
    {
      title: "操作",
      dataIndex: "createTime",
      key: "createTime",
      align: "center",
      width: 300,
      render: (text: string, record: any, index: number) => {
        const url = record.url;
        return (
          <div>
            <Button
              disabled={record.status !== 1}
              type="link"
              onClick={() => {
                if (!url) return;
                window.open(`${url}`);
              }}
            >
              下载
            </Button>
            <Button
              type="link"
              disabled={record.status !== 1}
              onClick={() => {
                if (!url) return;
                copy(url);
                message.success("复制成功");
              }}
            >
              复制链接
            </Button>
            <Button
              type="link"
              onClick={() => {
                deleteItem(record.id, index);
              }}
            >
              删除
            </Button>
          </div>
        );
      },
    }
  ]

  return (
    <div className="journal">
      <Table
        rowKey="id"
        columns={columns}
        dataSource={pageResponse.data || []}
        pagination={{
          current: pageResponse.pageInfo.page || 0,
          pageSize: pageResponse.pageInfo.size || 10,
          showQuickJumper: true,
          showSizeChanger: true,
          pageSizeOptions: ["5", "10", "15", "20"],
          total: pageResponse.pageInfo.total || 0,
          showTotal: (total) => `共 ${total} 条`,
          onChange: (pageNo, pageSize) => {
            onChangePage({page: pageNo, size: pageSize})
          },
        }}
      />
    </div>
  )
}

export default DataExport
